<template>
	<Layout>
		<div>
			<div class="header">

				<el-input placeholder="请输入用户名" class="input-search" style="		width: 200px;" v-model="username"></el-input>
				<el-button type="primary" @click="getData()"><i class="el-icon-search" style="margin-right: 5px;"></i>搜索</el-button>
				<el-button type="primary" @click="handleEdit()"><i class="el-icon-edit" style="margin-right: 5px;"></i>添加</el-button>
			</div>


			<el-table :data="data">
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="username" label="用户名"></el-table-column>
				<el-table-column prop="age" label="年龄"></el-table-column>
				<el-table-column prop="email" label="邮箱"></el-table-column>
				<el-table-column prop="password" label="密码"></el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
						<el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog :title="obj.id==0?'新增学生数据':'编辑学生数据'" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-form ref="form" label-width="80px">
				<el-form-item label="ID" v-if="obj.id>0">
					<el-input v-model="obj.id" disabled></el-input>
				</el-form-item>
				<el-form-item label="用户名">
					<el-input v-model="obj.username"></el-input>
				</el-form-item>
				<el-form-item label="密码">
					<el-input v-model="obj.password"></el-input>
				</el-form-item>
				<el-form-item label="年龄">
					<el-input v-model="obj.age" type="number"></el-input>
				</el-form-item>
				<el-form-item label="邮箱">
					<el-input v-model="obj.email"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="edit()">确 定</el-button>
			</span>
		</el-dialog>
	</Layout>
</template>

<script>
	// @ is an alias to /src
	// import axios from 'axios'
  import axios from '@/utils/request'
	import Layout from "@/components/Layout.vue"

	export default {
		components: {
			Layout
		},
		name: 'HomeView',
		data() {
			return {
				data: [],
				obj: {}, //用来临时存修改的学生数据
				dialogVisible: false ,//用来控制对话框是否显示
				username:""
			}
		},
		created() {
			this.getData()
		},
		methods: {
			//点击按钮后会触发的函数
			handleClick(item) {
				console.log(item)
				//弹出对话框
				this.$confirm('此操作将永久删除ID为' + item.id + '的学生, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => { //点击确定
					axios.post("/student/delete", item).then(res => {
							this.$message({
								message: '恭喜你，删除成功',
								type: 'success'
							});
							this.getData()
					}).catch(e=>{
          })
				}).catch(() => { //点击取消
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			///获取数据
			getData() {
				axios.get("/student/all?username="+this.username).then(res => {
					this.data = res.data
				}).catch(e=>{
        })
			},
			//弹出编辑和新增对话框
			handleEdit(item) {
				if(item){//如果传过来的参数有数据，就是编辑
					this.obj = JSON.parse(JSON.stringify(item)) //重新生成一个对象，避免修改数据会影响到表格
				}else{//新增
					this.obj ={
						id:0,
						username:"",
						password:"",
						age:"",
						email:""
					}
				}
				this.dialogVisible = true //显示对话框
				
			},
			edit() {
				this.dialogVisible = false
				// console.log(this.obj);
				axios.post("http://localhost:8080/student/edit", this.obj).then(res => {
					//res就是后端返回的数据
						this.$message({
							message: '恭喜你，操作成功',
							type: 'success'
						});
						this.getData()
				}).catch(e=>{
        })
			}
		}

	}
</script>
<style>
	.header {
		display: flex;
		flex-direction: row;
	}

	.input-search {

		margin-right: 30px;
	}
</style>